<template>
  <div class="grid-content">
    <p class="mt15"></p>
    <el-row>
      <el-col>
        <div class="search">
          <el-form :model="queryParams" ref="queryRef" label-width="100px" :inline="true" class="addGroup"
            @submit.native.prevent>
            <el-form-item label="任务名称" prop="taskName">
              <el-input v-model.trim="queryParams.taskName" placeholder="请输入任务名称" clearable @keyup.enter="handleQuery"
                style="width: 200px" />
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" @click="handleQuery">查询</el-button>
              <el-button plain @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div class="wrapBox" style="width: 100%">
        <el-table v-loading="loading" :data="dataList" stripe row-key="id" ref="multipleTable"
          @selection-change="handleSelectionChange" @select="selectChange" :header-cell-class-name="headerCellStyle">
          <el-table-column type="selection" width="55" align="center" :reserve-selection="true"
            :selectable="selectable" />
          <el-table-column label="任务名称" prop="taskName" />
          <el-table-column label="任务管理员" align="center" prop="taskManager" />
          <el-table-column label="任务状态" align="center" prop="taskStatus" width="140px">
            <template #default="scope">
              <div v-if="scope.row.taskStatus == 0">未分配</div>
              <div v-else-if="scope.row.taskStatus == 1">进行中</div>
              <div v-else>已结束</div>
            </template>
          </el-table-column>
          <el-table-column label="承担小组" align="center" prop="groupName" />
          <el-table-column label="组长" align="center" prop="groupLeader" width="140px" />
          <el-table-column label="任务地区" align="center" prop="taskDistrict" show-overflow-tooltip />
          <el-table-column label="所属父任务" align="center" prop="parentTask">
            <template #default="scope">
              <div v-if="scope.row.parentId == 0"></div>
              <div v-else>{{ scope.row.parentTask }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-row>
    <el-row>
      <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="queryParams.page"
        v-model:limit="queryParams.rows" @pagination="getList" />
    </el-row>
  </div>
</template>

<script setup>
import { getManagement } from "@/api/workEvaluation/appraisalTaskManagement/addAppraisalTaskManagement.js";
import { reactive, toRefs } from "vue";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["getSelectionTask"]);
const props = defineProps({
  typeStatus: {
    type: Number,
  },
  tableChooseVal: {
    type: Object,
  },
});
const { typeStatus, tableChooseVal } = toRefs(props);
const dataList = ref([]);
const total = ref(0);
const loading = ref(false);
const data = reactive({
  queryParams: {
    page: 1,
    rows: 10,
    taskName: undefined,
  },
});
const { queryParams } = toRefs(data);
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.page = 1;
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
// 单选
const selectChange = (selection) => {
  if (selection.filter(item => item.parentId != '0').length > 0) {
    selection = selection.filter(item => item.parentId == '0')
  }
  if (selection.length > 1) {
    selection.shift();
    proxy.$refs.multipleTable.clearSelection()
    proxy.$refs.multipleTable.toggleRowSelection(selection[0], true);
  }
};
const selectable = (row) => {
  return row.parentId == '0';
}
// 多选框选中数据
function handleSelectionChange(selection) {
  emits("getSelectionTask", selection);
}

const headerCellStyle = ({ column, columnIndex }) => {
  if (columnIndex === 0) {
    return "hiddenCheck";
  }
};

const getList = () => {
  loading.value = true;
  getManagement(queryParams.value)
    .then((response) => {
      dataList.value = response.data.rows ? response.data.rows : [];
      total.value = response.data.total;
      proxy.$refs.multipleTable.clearSelection();
      dataList.value.forEach((v, i) => {
        if (tableChooseVal.value.ypgId !== null || tableChooseVal.value.ypgId !== '') {
          if (v.id == tableChooseVal.value.ypgId) {
            proxy.$refs['multipleTable'].toggleRowSelection(v, true)
          }
        }
      })
      loading.value = false;
    })
    .catch((err) => {
      loading.value = false;
      dataList.value = [];
      total.value = 0;
    });
};

watch(() => props.tableChooseVal, () => {
  getList();
}, { immediate: true });
</script>

<style>
.el-table__header-wrapper .el-checkbox, .el-table__body .el-checkbox.is-disabled {
  display: none;
}
</style>
